/* pages/tools/tools.wxss */
.tools {
    min-height: 100vh;
    // background-color: #f5f5f5;
    padding-bottom: 45rpx;
    box-sizing: border-box;
    // background-image: url('cloud://b30bms-9ghxesuoece68be1.6233-b30bms-9ghxesuoece68be1-1306410183/bg.png');
    background:url('https://wftpay.ssgddsj.com/b30Img/bg.png') no-repeat;
    background-size:contain;
    background-color: #f5f6fa;
    background-repeat: no-repeat;
    background-size: 100% auto;
    // .tools_bgimg {
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   z-index: 1;
    //   width: 100%;
    //   height: 100%;
    //   image {
    //     width: 100%;
    //   }
    // }
    .tools_container{
      // position: absolute;
      // top: 0;
      // left: 0;
      // z-index: 2;
      width: 100%;
      height: 100%;
      padding: 45rpx 45rpx 0;
      box-sizing: border-box;
      .weight_container{
        background: linear-gradient(#8193fa,#7c5fdd);
        height: 215rpx;
        width: 100%;
        border-radius: 14rpx;
        position: relative;
        .weight_contrast {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 10;
            display: flex;
            justify-content: space-between;
            // align-items:center;
            padding: 0 65rpx;
            box-sizing: border-box;
            .weight_unit{
                position: absolute;
                right: 20rpx;
                top: 20rpx;
                font-size: 18rpx;
                color: #fff;
                image{
                  margin-left: 4rpx;
                  width: 10rpx;
                  height: 15rpx;
                }
            }
            .weight_item {
              margin-top: 76rpx;
                width: 140rpx;
                text-align: center;
                color: #fff;
                .weight_item_val {
                    font-size: 50rpx;
                    font-weight: bold;
                }
                .weight_item_title {
                    font-size: 20rpx;
                }
              }
        }
        .weight_icon{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          width: 200rpx;
          z-index: 9;
          image{
            width: 100%;
            height: 133.32rpx;
          }
        }
      }
  
    
      .lean_tools {
          margin-top: 30rpx;
          height: 630rpx;
          width: 100%;
          background-color: #fff;
          border-radius: 14rpx;
          box-shadow: 0 0 20rpx #d8d8d8;
          padding: 0 35rpx;
          box-sizing: border-box;
          .lean_tools_title {
              display: flex;
              align-items: center;
              line-height: 115rpx;
              font-size: 32rpx;
              &::before{
                  content: "";
                  display: inline-block;
                  width: 6rpx;
                  height: 30rpx;
                  border-radius: 50rpx;
                  background:#90acff;
                  margin-right: 14rpx;
                  margin-top: 5rpx;
              }
          }
          
          .lean_tools_content {
            .lean_tools_item {
                width: 156rpx;
                text-align: center;
                float: left;
                margin-right: 62rpx;
                font-size: 22rpx;
                margin-bottom: 12rpx;
              .lean_tools_item_img {
                  width: 156rpx;
                  height: 156rpx;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 50rpx;
                image {
                  display: block;
                  width: 50rpx;
                  height: 50rpx;
                }
              }
          
              .lean_tools_item_text {
                  line-height: 75rpx;
              }
            }
            .lean_tools_item:nth-child(3n){
                margin-right: 0;
            }
            .lean_tools_item:nth-child(1){
              .lean_tools_item_img {
                background-color: #bbeff5;
              }
            }
            .lean_tools_item:nth-child(2){
              .lean_tools_item_img {
                 background-color: #ff9b91;
              }
            }
            .lean_tools_item:nth-child(3){
              .lean_tools_item_img {
                  background-color: #af8eff;
                }
                
            }
            .lean_tools_item:nth-child(4){
              .lean_tools_item_img {
                  background-color: #90acff;
                }
                
            }
            .lean_tools_item:nth-child(5){
              .lean_tools_item_img {
                  background-color: #58b9fe;
                }
                
            }
            .lean_tools_item:nth-child(6){
              .lean_tools_item_img {
                  background-color: #80e5f1;
                }
                
            }
          }
      }
    
      .body_round {
        margin-top: 30rpx;
        height: 170rpx;
        display: flex;
        justify-content: space-between;
        .body_round_item {
          width: 315rpx;
          background-color: #fff;
          box-shadow: 0 0 20rpx #d8d8d8;
          border-radius: 14rpx;
          padding: 20rpx 25rpx;
          box-sizing: border-box;
          position: relative;
          .item_icon {
            position: absolute;
            top: 20rpx;
            right: 24rpx;
            width: 55rpx;
            height: 55rpx;
            image{
              width: 100%;
              height: 100%;
            }
          }
      
          .item_title {
            font-size: 24rpx;
          }
      
          .item_val {
            font-size: 50rpx;
            span {
              font-size: 18rpx;
            }
          }
      
          .item_text {
            font-size: 18rpx;
            color: #acacb1;
          }
      
          .item_btn {
              position: absolute;
              bottom:16rpx;
              right: 24rpx;
              width: 120rpx;
              height: 35rpx;
              background:linear-gradient(#8194fa,#7c60de);
              border-radius: 18rpx;
              line-height: 35rpx;
              color: #fff;
              font-size: 18rpx;
              text-align: center;
          }
        }
      }
    }

  }
  //弹框
  .popout-container{
    view.mask {
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .5);
      width: 100%;
      height: 100vh;
      z-index: 99;

    }
    //姓名
    view.name-popout {
      z-index: 100;
      position: absolute;
      top: 300rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 540rpx;
      height: 490rpx;
      background-color: #fff;
      border-radius: 10rpx;
      view.name-popout-title {
        margin-top: 50rpx;
        text-align: center;
        font-size: 34rpx;
      }
    
      view.name-popout-content {
        margin-top: 70rpx;
        view.content-input {
          text-align: center;
          position: relative;
          height: 68rpx;
          input {
            font-size: 30rpx;
          }
          &::after{
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            content: "";
            display: block;
            height: 1rpx;
            background-color: #e6e6e6;
            width: 330rpx;
          }
        }
    
        view.content-info {
          margin-top: 24rpx;
          text-align: center;
          font-size: 20rpx;
          color: #a7a7a5;
        }
      }
    
      view.name-popout-btn {
        // margin: 50rpx auto 0;
        position: absolute;
        bottom: 54rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 274rpx;
        line-height: 80rpx;
        color: #fff;
        text-align: center;
        font-size: 32rpx;
        background: linear-gradient(#8193fa,#7c5fdd);
        border-radius: 40rpx;
      }
    }
  }